<!--
 * @name order
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-02
 -->

<template>
  <div class="p-ballot common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :startTime="gameInfo.startTime"
      :eventName="gameInfo.eventName"
    ></page-title>
    <div class="content">
      <div
        class="content-left"
        :style="{
          gridTemplateRows: `repeat(${count > 10 ? 10 : count}, calc((100vh - 168px - 7rem) /${
            count > 10 ? 10 : count
          }))`,
        }"
      >
        <div class="item" v-for="(item, index) in ballotingList" :key="index">
          <div class="item-wrap">
            <div
              class="detail"
              :style="isTeam ? 'justify-content: center !important;font-size: 4.5rem' : ''"
            >
              <div>
                {{ item?.RegName }}
              </div>
              <div v-if="!isTeam" style="color: #ffff00; margin-right: 6px">
                {{ item?.Delegation }}
              </div>
            </div>
            <div class="border"></div>
          </div>
        </div>
      </div>
      <div
        class="content-right"
        :style="{
          gridTemplateRows: `repeat(${count > 10 ? 10 : count}, calc((100vh - 168px - 7rem) /${
            count > 10 ? 10 : count
          }))`,
        }"
      >
        <div class="item" v-for="(item, index) in count" :key="index">
          <div class="order" :style="isTeam ? 'font-size: 5rem;' : ''">{{ item }}</div>
          <div class="item-wrap">
            <div
              class="detail"
              :style="isTeam ? 'justify-content: center !important;font-size: 4.5rem' : ''"
            >
              <div>{{ ballotedList[item]?.RegName || '' }}</div>
              <div v-if="!isTeam" style="color: #ffff00">
                {{ ballotedList[item]?.Delegation }}
              </div>
            </div>
            <div class="border"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import { reactive } from 'vue'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  // match: '场地障碍团体赛',
  match: '',
  event: 'JUMPTEAM',
  type: '出场顺序 - 抽签',
  startTime: '13:01:29',
  eventName: '',
})

const isTeam = ref(false)
const count = ref()

const medalData = reactive({
  gold: {
    delegation: '广东',
    name: '梁锐基',
    horseName: '蓝露娜 LA LUNA',
  },
  silver: {
    delegation: '浙江',
    name: '段义华',
    horseName: '暮蓿 (Mu Xu)',
  },
  copper: {
    delegation: '浙江',
    name: '徐浩',
    horseName: 'Eyes Blue De La Sina',
  },
})

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])
const ballotingList = ref([])
const ballotedList = ref({})

onBeforeMount(() => {})
onMounted(() => {
  // gameInfo.value.match = route.query.MatchDate
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

watchEffect(() => {
  if (results.value?.datasetList) {
    gameInfo.value.event = results.value.datasetList[0][0]?.EventCode
    // gameInfo.value.match = results.value.datasetList[0][0]?.EventName
    gameInfo.value.eventName = results.value.datasetList[0][0].EventName
    if (gameInfo.value.eventName.includes('团体')) {
      isTeam.value = true
    } else {
      isTeam.value = false
    }
    isTeam.value = results.value.datasetList[0][0]?.TeamEvent == 'Y'
    count.value = results.value.datasetList[0][0]?.RegCompCount
    ballotingList.value = results.value.datasetList[1]
    // ballotedList.value = results.value.datasetList[2]
    const arr = results.value.datasetList[2]
    ballotedList.value = arr.reduce((acc, cur, index) => {
      acc[cur.DrawNo] = cur
      return acc
    }, {})
  }
})

watch(
  () => route.query,
  (val) => {
    params.value = val
    getData()
  }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/ballot';
</style>
